<template>
  <div class="legend-wrapper flex flex-center">
    <icon-hover-and-active
      :class-name="'page-arrow'"
      :default-url="icons.normal.left"
      :hover-url="icons.hover.left"
      :active-url="icons.active.left"
      :show="legendDatas.length>pageSize"
      @clickFn="prePage"
    />
    <ul class="legend-list flex flex-center">
      <li v-for="(item,index) in fiterLegendData" :key="index">
        <div v-if="Array.isArray(item)" class="flex flex-col">
          <div
            class="legend-group flex flex-center"
            style="margin-bottom: 12px;"
            @click="clickLegend(item[0].text,index)"
          >
            <span
              :style="{'background-color':item.isActive?item[0] && item[0].color:'#bbbbc8'}"
              class="color"
            />
            <p :style="{'color':item.isActive?'':'#bbbbc8'}" class="text">{{ item[0].text }}</p>
          </div>
          <div class="legend-group flex flex-center" @click="clickLegend(item[1].text,index)">
            <span
              :style="{'background-color':item.isActive?item[1] && item[1].color:'#bbbbc8'}"
              class="color"
            />
            <p :style="{'color':item.isActive?'':'#bbbbc8'}" class="text">{{ item[1].text }}</p>
          </div>
        </div>
        <div v-else>
          <div class="legend-group flex flex-center" @click="clickLegend(item.text,index)">
            <span :style="{'background-color':item.isActive?item.color:'#bbbbc8'}" class="color" />
            <p :style="{'color':item.isActive?'':'#bbbbc8'}" class="text">{{ item.text }}</p>
          </div>
        </div>
      </li>
    </ul>
    <icon-hover-and-active
      :class-name="'page-arrow'"
      :default-url="icons.normal.right"
      :hover-url="icons.hover.right"
      :active-url="icons.active.right"
      :show="legendDatas.length>pageSize"
      @clickFn="nextPage"
    />
  </div>
</template>

<script>
import IconHoverAndActive from '@/components/IconHoverAndActive'
import { mapGetters } from 'vuex'

export default {
  name: 'DataOutput',
  components: {
    IconHoverAndActive
  },
  props: {
    legendData: {
      type: Array,
      default() {
        return []
      }
    },
    instanceIndex: {
      type: Number,
      default: -1
    },
    instanceList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      page: 1,
      pageSize: 3,
      legendDatas: this.filterLegend(
        JSON.parse(JSON.stringify(this.legendData))
      )
    }
  },
  computed: {
    ...mapGetters(['icons', 'evaluationInstances']),
    fiterLegendData() {
      return this.legendDatas.slice(
        (this.page - 1) * this.pageSize,
        this.page * this.pageSize
      )
    }
  },
  watch: {
    legendData: {
      handler(newValue, oldValue) {
        this.legendDatas = this.filterLegend(
          JSON.parse(JSON.stringify(this.legendData))
        )
        for (let i = 0; i < this.legendDatas.length; i++) {
          this.legendDatas[i].isActive = true
        }
        this.legendDatas.splice()
      },
      deep: true
    }
  },
  mounted() {
    for (let i = 0; i < this.legendDatas.length; i++) {
      this.legendDatas[i].isActive = true
    }
    this.legendDatas.splice()
  },
  methods: {
    prePage() {
      if (this.page > 1) {
        --this.page
      }
    },
    nextPage() {
      if (this.page < Math.ceil(this.legendDatas.length / this.pageSize)) {
        ++this.page
      }
    },
    clickLegend(curveName, legendIndex) {
      // curveName.replace(/(_tpr|_fpr)/g, '')
      legendIndex = (this.page - 1) * this.pageSize + legendIndex
      this.legendDatas[legendIndex].isActive = !this.legendDatas[legendIndex]
        .isActive
      this.legendDatas.splice()
      this.$emit('clickLegend', {
        curveName,
        evaluationListIndex: this.instanceIndex,
        instanceList: this.instanceList
      })
    },
    filterLegend(legend) {
      const final = JSON.parse(JSON.stringify(legend))
      final.sort((a, b) => {
        let aMatch = ''
        let bMatch = ''
        if (Array.isArray(a)) {
          aMatch = a[0].text.match(/[0-9]+/g)
          bMatch = b[0].text.match(/[0-9]+/g)
        } else if (a instanceof Object) {
          aMatch = a.text.match(/[0-9]+/g)
          bMatch = b.text.match(/[0-9]+/g)
        } else {
          return 0
        }
        if (aMatch && bMatch) {
          for (let i = 0; i < Math.max(aMatch.length, bMatch.length); i++) {
            if (aMatch[i] && bMatch[i]) {
              if (parseInt(aMatch[i]) > parseInt(bMatch[i])) {
                return 1
              } else if (parseInt(aMatch[i]) < parseInt(bMatch[i])) {
                return -1
              }
            } else {
              if (!aMatch[i]) {
                return 1
              }
              if (!bMatch[i]) {
                return -1
              }
            }
          }
        } else {
          return 0
        }
      })
      return final
    }
  }
}
</script>

<style lang="scss" scoped>
.legend-wrapper {
	.page-arrow {
		width: 24px;
		height: 24px;
		cursor: pointer;
		&:first-of-type {
			margin-right: 24px;
		}
		&:last-of-type {
			margin-left: 24px;
		}
	}
	.legend-list {
		> li {
			margin-right: 32px;
			&:last-of-type {
				margin-right: 0;
			}
			.legend-group {
				cursor: pointer;
				.color {
					$w: 18px;
					width: $w;
					height: $w;
					margin-right: 5px;
					border-radius: 1px;
				}
				.text {
					color: #7f7d8e;
				}
			}
		}
	}
}
</style>
